Welcome to my blog

Home » Posts filed under rekayasa perangkat lunak
Tampilkan postingan dengan label rekayasa perangkat lunak. Tampilkan semua postingan
Tampilkan postingan dengan label rekayasa perangkat lunak. Tampilkan semua postingan

Sabtu, 02 Maret 2013

code warna di html

21.50  ,  No comments

code warna di html


Assalamualaikum wr. wb.

Dalam HTML kita dapat membuat berbagai warna sesuai dengan keinginan kita ...
Berikut adalah contoh kode HTML warna :

contoh warna 
Cobalah Sendiri »

Masih banyak lagi kode - kode HTML untuk warna :


Gray ShadesColor HEXColor RGB

#000000 rgb(0,0,0) 

#080808 rgb(8,8,8) 

#101010 rgb(16,16,16) 

#181818 rgb(24,24,24) 

#202020 rgb(32,32,32) 

#282828 rgb(40,40,40) 

#303030 rgb(48,48,48) 

#383838 rgb(56,56,56) 

#404040 rgb(64,64,64) 

#484848 rgb(72,72,72) 

#505050 rgb(80,80,80) 

#585858 rgb(88,88,88) 

#606060 rgb(96,96,96) 

#686868 rgb(104,104,104) 

#707070 rgb(112,112,112) 

#787878 rgb(120,120,120) 

#808080 rgb(128,128,128) 

#888888 rgb(136,136,136) 

#909090 rgb(144,144,144) 

#989898 rgb(152,152,152) 

#A0A0A0 rgb(160,160,160) 

#A8A8A8 rgb(168,168,168) 

#B0B0B0 rgb(176,176,176) 

#B8B8B8 rgb(184,184,184) 

#C0C0C0 rgb(192,192,192) 

#C8C8C8 rgb(200,200,200) 

#D0D0D0 rgb(208,208,208) 

#D8D8D8 rgb(216,216,216) 

#E0E0E0 rgb(224,224,224) 

#E8E8E8 rgb(232,232,232) 

#F0F0F0 rgb(240,240,240) 

#F8F8F8 rgb(248,248,248) 

#FFFFFF rgb(255,255,255) 

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF
oke,Semoga bermanfaat ya

Read More

Belajar HTML - Tampilan (Layout)

21.42  ,  No comments

 Belajar HTML - Tampilan (Layout)

Dalam proses belajar HTML, proese membuat tampilan pada sebuah halaman (layout) web/blog adalah sangat penting hukumnya bagi anda yang sedang belajar dalam pembuatan sebuah web/blog.

berikut adalah contoh tampilan (layout) HTML sederhana dengan kolaborasi style (CSS)
"Tenang saja kita akan belajar css pada bab-bab selanjutnya"


Tampilan ( Layout) dengan kolaborasi Tabel
pada contoh ini kita akan menggunakan kolaborasi tabel pada tampilan layout, perhatikan contoh

 contoh
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>

</body>
</html>
Cobalah Sendiri »

Maka akan tampak seperti di bawah ini :

Main Title of Web Page

Menu
HTML
CSS
JavaScript		Content goes here
Copyright © 2011 W3Schools.com



 Tampilan (Layout) dengan kolaborasi element DIV

Elemen div merupakan tingkat blok elemen yang digunakan untuk mengelompokkan elemen HTML.


Contoh berikut menggunakan lima elemen div untuk membuat tata letak kolom, dan menciptakan hasil yang sama seperti pada contoh di atas sebelumnya :


 contoh
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 W3Schools.com</div>

</div>

</body>
</html>
Cobalah Sendiri »

maka akan tampak seperti ini :

Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here
Copyright © 2011 W3Schools.com


Tips - HTML Layout

     Dalam proses membuat sebuah tampilan web/blog sederhana yang di perlukan adalah sebuah tag-tag HTML dan CSS dimana tag-tag CSS tersebut di gunakan untuk membuat tampilan HTML menjadi lebih dinamis ( lebih bagus). namun nanti (setelah anda menguasai HTML dan CSS ) anda akan dapat mengkolaborasikannya sendiri sesuai dengan kreasi anda seperti dengan javascript, PHP ,ASP dan lain sebagainya .



    Saya sarankan setelah anda menguasai ataupun sudah familiar dengan tag-tag HTML anda sebaiknya belajar CSS terlebih dahulu. dan kemudian baru belajar javascript dan seterusnya .



    insyaallah nanti saya akan membuat tutorial belajar CSS juga .



oke, semoga bermanfaat ya buat kalian semua :D
jangan lupa comment ya

Read More

belajar HTML Frames

21.37  ,  No comments

Assalamualaikum wr. wb.

Belajar HTML - HTML Frames



Dengan Frames beberapa jendela halaman web dapat di tampilkan dalam satu halaman saja .

oke, kita akan melihat contoh langsung dari html frames :

vertikal frameset
Cara membuat frameset dengan tiga dokumen vertikal yang berbeda.

frameset horizontal
Cara membuat frameset horizontal dengan tiga dokumen yang berbeda.

(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini)

HTML Frame

Dengan frame, Anda dapat menampilkan lebih dari satu dokumen HTML di jendela browser yang sama. Setiap dokumen HTML disebut sebuah frame, dan setiap frame adalah independen dari yang lain.

Kelemahan dari menggunakan frame adalah:

Frame kemungkinan tidak akan didukung pada versi mendatang dari HTML
Frame sulit untuk digunakan. (Mencetak seluruh halaman sulit).
Pengembang web harus melacak semua dokumen HTML yang lebih.


Elemen HTML frameset

Elemen frameset memegang satu atau lebih elemen frame.Setiap elemen frameset dapat memegang dokumen yang terpisah.

Elemen frameset menyatakan BERAPA BANYAK kolom atau baris yang akan ada dalam rangkaian frame, dan berapa banyak persentase / pixel dari ruang yang akan menempati masing-masing frame.


Elemen HTML frame

Tag <frame> mendefinisikan satu jendela tertentu (frame) dalam sebuah frameset.

Pada contoh di bawah kita memiliki sebuah frameset dengan dua kolom.

Kolom pertama diatur ke 25% dari lebar jendela browser. Kolom kedua adalah set ke 75% dari lebar jendela browser.
Dokumen"frame_a.htm" dimasukkan ke dalam kolom pertama, dan dokumen "frame_b.htm" dimasukkan ke dalam kolom kedua.


<frameset cols="25%,75%">
   <frame src="frame_a.htm" />
   <frame src="frame_b.htm" />
</frameset>


Catatan: Ukuran kolom frameset juga dapat diatur dalam pixel(cols = "200.500"), dan salah satu kolom dapat diatur dengan menggunakan ruang yang tersisa, dengan asterisk (cols = "25%,*").


oke, kita langsung praktekan dengan contoh - contoh di bawah ini :

contoh 

Cara menggunakan tag <noframes>
Cara menggunakan tag <noframes> (untuk browser yang tidak mendukung frame).

Nested framesets
Bagaimana menciptakan sebuah frameset dengan tigadokumen, dan bagaimana campuran mereka dalam baris dankolom.

Frameset dengan noresize = "noresize"
Cara menggunakan atribut noresize. Gerakkan mouse di atasbatas antara frame dan melihat bahwa Anda tidak dapat memindahkan perbatasan.

navigasi frame
Bagaimana untuk membuat frame navigasi. Frame navigasi berisi daftar link dengan frame kedua sebagai target. File yang bernama "tryhtml_contents.htm" berisi tiga link. Kode sumberdari link:
<a href ="frame_a.htm" menargetkan ="showframe"> Frame </ a> <br>
<a href ="frame_b.htm" menargetkan ="showframe"> Bingkai b</ a> <br>
<a href ="frame_c.htm" menargetkan ="showframe"> Bingkai c</ a>
Frame kedua akan menunjukkan dokumen terkait.

Langsung ke bagian tertentu dalam bingkai
Dua frame. Salah satu frame memiliki sumber ke bagian tertentudalam sebuah file. Bagian yang ditentukan adalah dibuat denganname="C10"> <a di file "link.htm".

Langsung ke bagian tertentu dengan bingkai navigasi
Dua frame. Frame navigasi (content.htm) ke kiri berisi daftar linkdengan frame kedua (link.htm) sebagai target. Frame keduamenunjukkan dokumen terkait. Salah satu link dalam framenavigasi terkait dengan bagian yang ditentukan dalam file target.Kode HTML dalam file "content.htm" terlihat seperti ini: <a href="link.htm" sasaran ="showframe"> Tautan tanpa Anchor </ a><br> <a href = "# C10 link.htm "target =" showframe "> link dengan Anchor </ a>.


oke, kita akan lanjut tutorial panduan belajar html untuk pemula selanjutnya ...

Read More

belajar membuat table

21.21  ,  No comments

 belajar membuat table

Assalamualaikum wr. wb.

kita Belajar HTML, bagaimana cara membuat table ( tabel ) pada document HTML.
 

Tabel pada tag document HTML begitu berguna bagi anda yang suka berkreasi dengan dengan document - document HTML anda.

oke, sebelum kita lanjut lebih jauh tentang html tabel, kita lihat dahulu contoh sederhana penggunaan tabel pada document HTML secara langsung.


Tables
bagaimana cara membuat tabel pada html
Table borders
bagaimana cara membuat border ( tebal garis tepi ) pada tabel html


HTML TABEL

Tag Tabel pada document HTML di tulis dengan tag <table>


Sebuah tabel dibagi menjadi beberapa baris ( dengan tag <tr> ), dan setiap baris dibagi menjadi sel-sel data (dengan tag <td>). td singkatan dari "tabel data", dan memegang isi sel data. Sebuah tag <td>dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll


contoh tabel
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>


Maka hasil dari contoh tabel di atas akan terlihat seperti di bawah ini :
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2
HEADER TABEL HTML

Tag header dalam tabel didefinisikan dengan tag <th>.

Semua browser utama akan menampilkan teks dalam elemen<th> sebagai tebal dan terpusat .

contoh tabel header

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Maka Hasil dari contoh tabel header di atas seperti di bawah ini :

Header 1Header 2
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2


oke, sekarang kita akan lihat berbagai contoh dari penggunaan tag tabel pada document html tersebut :

Tabel tanpa batas tepi
Cara membuat tabel tanpa batas tepi.

tabel header
Cara membuat header tabel.

Tabel dengan keterangan
Bagaimana menambahkan keterangan ke tabel.

Tabel sel dengan span lebih dari satu baris / kolom
Bagaimana untuk menentukan sel tabel yang mencakup lebih dari satu baris atau satu kolom.

Tag di dalam tabel
Bagaimana untuk menampilkan unsur-unsur di dalam unsur-unsur lain.

cell padding
Cara menggunakan cell padding untuk membuat jarak antara huruf dengan garis tepi (border).

cell spasi
Cara menggunakan cell spacing untuk meningkatkan jarak antara sel-sel.

Atribut frame 
Cara menggunakan " frame " atribut untuk mengontrol perbatasan di sekitar meja.



oke, semoga bermanfaat ya ...... :D

Read More

belajar HTML link

21.08  ,  No comments

belajar HTML link

Assalamualaikum wr. wb

lanjut ya .... kita belajar tentang HTML link
HTML link hampir di gunakan oleh semua  web / blog agar mempunyai tampilan lebih dinamis bagi web/blog mereka, dan selain itu html tag link juga di gunakan untuk memudakan para pengunjung blog / web mereka agar lebih mudah untuk menemukan sesuatu yang di butuhkan di blog/ web itu.


HTML Hyperlink (Link)
HTML Hyperlink (Link) maksudnya adalah sebuah gambar, text atau apapun yang mempunyai sebuah link dan ketika anda klik akan melompat ke dokumen lainnya.


Link dalam HTML di tentukan dengan TAG  <a>

tag <a> dapat di gunakan dengan 2 cara :

1.  Untuk membuat link ke dokumen lain, dengan menggunakanatribut  "href "   ( tanpa tanda kutip )
2. Untuk membuat bookmark di dalam dokumen, dengan menggunakan nama atribut 
" untuk penggunaan tag <a> yang kedua akan di jelaskan di bawah"



Syntax Sederhana Dari HTML Link

Kode Link HTML dapat terlihat seperti di bawah ini :
<a href="alamat url">Link text</a>
lihatlah attribut href di gunakan .
Contoh LINK

<a href="http://lintanginfo.blogspot.com//">Kunjungi kotak belajar</a>

Jika anda klik link di atas maka akan mengunjungi http://www.zengbogel.blogspot.com/ .

LINK Dengan Attribut TARGET
Penggunaan Attribut target pada sebuah link, akan menjadikan link tersebut terbuka dalam tab baru ( new tab )
Contoh

<a href="http://lintanginfo.blogspot.com//" target="_blank">kotak belajar</a>


Memang tidak akan berubah dari bentuk link nya, akan tetapi perubahan akan terlihat ketika link tersebut di klik, secara otomatis link tersebut akan terbuka pada tab baru ( new tab ).

tag yang di tambahkan pada attribut TARGET ini adalah :    target="_blank"


LINK Dengan Attribut NAME
Mungkin bagi anda yang baru belajar HTML akan bingung dengan maksud penggunaan attribut name ini, oke sebaiknya anda klik dulu link di bawah ini untuk contoh sederhana dalam belajar link berattribut name ini.

LINK ATTRIBUT NAME

 jika anda sudah mengerti mari lanjut .

Contoh penggunaan attribut name


<a name="tips">Kumpulan Tips Dan Trick</a>

Kedua buat sebuah link yang mengarah ke attribut name yang di buat sebelumya.
<a href="#tips">Kunjungi Tips Dan Trick</a>

Atau anda juga bisa membuat sebuah link dengan url untuk menuju ke attribut name yang telah di buat sebelumnya.
<a href="http://www.kotakbelajar.com/html_links.htm#tips">
Kunjungi Tips Dan Trick </a>

Kumpulan Contoh Penggunaan LINK pada HTML


Link pada gambar
bagaimana cara menambahkan link pada gambar
Link bookmark
bagaimana menambahkan link di bookmark
Create a mailto link
bagaimana untuk membuat link ke pesan email (hanya akan bekerja jika Anda memiliki instalasi email di pc anda ).
Create a mailto link 2
Banyak lagi tentang link email

oke, semoga bermanfaat ...

Read More

belajar CSS digunakan untuk elemen Style HTML

20.49  ,  No comments

CSS digunakan untuk elemen Style HTML

Assalamualaikum wr. wb.

mari kita beajar css untuk style HTML
lihat contoh penggunaan css untuk style HTML

Look! Styles and colors


This text is in Verdana and red


This text is in Times and blue


This text is 30 pixels high
Style HTML dengan CSS

CSS diperkenalkan bersama-sama dengan HTML 4, untuk menyediakan cara yang lebih baik untuk elemen HTML Style .

CSS dapat ditambahkan ke HTML dengan cara berikut:

 - dengan file Cascading Style Sheet (file CSS)
 - dalam elemen <style> di bagian kepala HTML
 - dalam atribut style dalam elemen HTML tunggal
 - Menggunakan Atribut HTML Style

Cara yang disukai untuk menambahkan CSS untuk HTML,adalah menempatkan sintaks CSS pada file CSS yang terpisah.

Namun, dalam Belajar HTML ini kami akan memperkenalkan HTML dengan CSS menggunakan atribut style. Hal ini dilakukan untuk menyederhanakan contoh. Hal ini juga agar membuat lebih mudah bagi Anda untuk mengedit kode dan mencoba sendiri.



Contoh HTML STYLE  - Background Color
Pada contoh ini kita akan mengubah background color dari tag body dan huruf
Contoh
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
Cobalah Sendiri »


Contoh HTML Style - Font, Color and Size
Contoh
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Cobalah Sendiri »




Contoh HTML Style - Text Alignment ( Posisi Text )
Contoh
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Cobalah Sendiri »
oke, kita lanjut ke tutorial berikutnya !!!
semoga bermanfaat :)

Read More
Langganan: Postingan (Atom)
Diberdayakan oleh Blogger.